import React, { FunctionComponent } from 'react';

export const PointsIcon: FunctionComponent = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="https://www.w3.org/2000/svg"
  >
    <circle cx="8" cy="8" r="4" fill="#8C8C8C" />
  </svg>
);

export const CornerRadiusIcon: FunctionComponent = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="https://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M5 10V11H6V10C6 7.79086 7.79086 6 10 6H10.6667C10.7789 6 10.8901 6.00462 11 6.01369V5.01093C10.8898 5.00368 10.7787 5 10.6667 5H10C7.23858 5 5 7.23857 5 10Z"
      fill="#8C8C8C"
      fillOpacity="0.8"
    />
  </svg>
);

export const WidthIcon: FunctionComponent = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="https://www.w3.org/2000/svg"
  >
    <path
      d="M5.146 12.5H6.146L7.91162 6.125H7.97412L9.73975 12.5H10.7397L12.9272 4.5H11.9429L10.271 11.0156H10.1929L8.48975 4.5H7.396L5.69287 11.0156H5.61475L3.94287 4.5H2.9585L5.146 12.5Z"
      fill="black"
      fillOpacity="0.3"
    />
  </svg>
);

export const HeightIcon: FunctionComponent = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="https://www.w3.org/2000/svg"
  >
    <path
      d="M4.84229 12.5H5.81104V8.92188H10.0767V12.5H11.0454V4.5H10.0767V8.0625H5.81104V4.5H4.84229V12.5Z"
      fill="black"
      fillOpacity="0.3"
    />
  </svg>
);

export const FontSizeIcon: FunctionComponent = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="https://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M9.96953 12H9.00078V4H10.0008V6.95312H10.0789C10.0936 6.93051 10.1091 6.90577 10.1257 6.87933C10.3383 6.54037 10.7262 5.92188 11.8133 5.92188C13.3289 5.92188 14.3758 7.125 14.3758 9.01563C14.3758 10.9219 13.3289 12.125 11.8289 12.125C10.7203 12.125 10.3155 11.4642 10.105 11.1206C10.096 11.1058 10.0873 11.0916 10.0789 11.0781H9.96953V12ZM11.7039 6.75C10.5789 6.75 9.98516 7.65625 9.98516 9C9.98516 10.3594 10.5945 11.2969 11.7039 11.2969C12.8602 11.2969 13.4539 10.2812 13.4539 9C13.4539 7.73438 12.8758 6.75 11.7039 6.75ZM1.04883 12L3.84883 4.00002H5.15236L7.95236 12H6.99883L6.29878 9.9999L2.7024 9.99991L2.00236 12H1.04883ZM4.50059 4.86221L5.94878 8.9999L3.0524 8.99991L4.50059 4.86221Z"
      fill="#8C8C8C"
    />
  </svg>
);

export const FontStyleIcon = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="https://www.w3.org/2000/svg"
  >
    <path d="M8 4H3V6.5M8 4H13V6.5M8 4V13M8 13H10M8 13H6" stroke="#8C8C8C" />
  </svg>
);

export const FontFamilyIcon = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="https://www.w3.org/2000/svg"
  >
    <path
      d="M13.1797 9.69922H12.0625V9.625C12.0703 8.17578 12.5 7.73438 13.2266 7.28906C13.6914 7 14.0547 6.58984 14.0547 6.00781C14.0547 5.31641 13.5156 4.875 12.8516 4.875C12.2539 4.875 11.6641 5.23828 11.6172 6.06641H10.4297C10.4805 4.66016 11.5352 3.89062 12.8516 3.89062C14.2852 3.89062 15.2461 4.75 15.2461 6.01953C15.2461 6.89844 14.8164 7.49219 14.1172 7.91406C13.4531 8.32422 13.1953 8.72656 13.1797 9.625V9.69922Z"
      fill="#8C8C8C"
    />
    <path
      d="M13.4336 11.293C13.4336 11.7266 13.0781 12.0742 12.6523 12.0742C12.2227 12.0742 11.8711 11.7266 11.8711 11.293C11.8711 10.8672 12.2227 10.5156 12.6523 10.5156C13.0781 10.5156 13.4336 10.8672 13.4336 11.293Z"
      fill="#8C8C8C"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M2 12L5.11111 4H6.19622L9.30733 12H8.23438L7.4566 10L3.85073 10L3.07296 12H2ZM5.65367 5.36389L7.06771 9L4.23962 9L5.65367 5.36389Z"
      fill="#8C8C8C"
    />
  </svg>
);

export const NameIcon = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="https://www.w3.org/2000/svg"
  >
    <path
      d="M6.29927 8.32862C6.13412 8.32862 6 8.18506 6 8.0083C6 7.83154 6.13412 7.68799 6.29927 7.68799H7.68978V4.10105C7.6469 3.65866 7.52007 3.33054 7.32664 3.09909C7.11679 2.84713 6.81843 2.69967 6.45712 2.6362C6.29471 2.60788 6.18431 2.44381 6.21077 2.26901C6.23723 2.09518 6.39051 1.97701 6.55383 2.00533C7.04745 2.09225 7.46442 2.30514 7.77099 2.67331C7.84945 2.76706 7.91971 2.87057 7.98175 2.98288C8.06022 2.83737 8.15328 2.70944 8.26004 2.59616C8.58029 2.25631 9.00912 2.07076 9.52099 2.0024C9.68522 1.98092 9.83394 2.10592 9.85401 2.2817C9.87409 2.45748 9.7573 2.61666 9.59307 2.63815C9.20985 2.68893 8.89872 2.81784 8.68066 3.04928C8.46442 3.27878 8.32755 3.62058 8.28832 4.10203V7.68701H9.70073C9.86588 7.68701 10 7.83057 10 8.00732C10 8.18408 9.86588 8.32764 9.70073 8.32764H8.28832V11.898C8.32755 12.3794 8.46442 12.7222 8.68066 12.9507C8.89872 13.1812 9.20985 13.3111 9.59307 13.3619C9.7573 13.3833 9.87409 13.5435 9.85401 13.7183C9.83394 13.8941 9.68522 14.0191 9.52099 13.9976C9.00912 13.9292 8.58029 13.7437 8.26004 13.4038C8.15328 13.2906 8.06022 13.1626 7.98175 13.0171C7.91971 13.1304 7.84945 13.2329 7.77099 13.3267C7.4635 13.6949 7.04653 13.9078 6.55383 13.9947C6.39142 14.023 6.23814 13.9048 6.21077 13.731C6.18431 13.5572 6.29471 13.3931 6.45712 13.3638C6.81843 13.3003 7.11679 13.1529 7.32664 12.9009C7.52007 12.6695 7.6469 12.3404 7.68978 11.899V8.32862H6.29927Z"
      fill="#8C8C8C"
    />
  </svg>
);

export const StrokeIcon = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="https://www.w3.org/2000/svg"
  >
    <path d="M11.5 9H3.5V7H11.5V9Z" fill="#8C8C8C" />
  </svg>
);

export const OpacityIcon = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="https://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M9 3H7V4H9V3ZM11.5 12H12V11.5H13V12V13H12H11.5V12ZM4 7V9H3V7H4ZM12 4.5V4H11.5V3H12H13V4V4.5H12ZM12 7V9H13V7H12ZM4 4.5V4H4.5V3H4H3V4V4.5H4ZM3 12V11.5H4V12H4.5V13H4H3V12ZM9 12H7V13H9V12Z"
      fill="#8C8C8C"
    />
  </svg>
);

export const ColorIcon = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="https://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M8.00162 3.00162C8.24369 3.25204 8.47476 3.49109 8.69485 3.72005C10.8983 6.01238 12 7.29389 12 8.85191C12.0025 9.91429 11.612 10.9775 10.8284 11.788C9.26637 13.404 6.73374 13.404 5.17166 11.788C4.38812 10.9775 3.9975 9.91425 4.00001 8.85188C4.00001 7.29386 5.10181 6.01238 7.30526 3.72005C7.52537 3.49106 7.75647 3.25198 7.99857 3.00153L7.99961 3.00046L8.00005 3L8.00162 3.00162ZM5.80482 6.91125C6.30665 6.23086 7.02355 5.457 8.00005 4.4404C8.97654 5.45699 9.69341 6.23086 10.1952 6.91125C10.795 7.72446 11 8.29121 11 8.85191L11 8.85428C11.0001 8.9029 10.9992 8.95148 10.9971 9H5.00287C5.00085 8.95147 4.9999 8.90287 5.00001 8.85424V8.85188C5.00001 8.2912 5.20502 7.72447 5.80482 6.91125Z"
      fill="#8C8C8C"
    />
  </svg>
);
